
import React from 'react';
import { 
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  FlatList,
  View,
  DeviceEventEmitter
} from 'react-native';
import { Icon } from 'react-native-vector-icons'; 
import { inject, observer } from 'mobx-react';

@inject((stores) => {
    return {
	  homeStore: stores.rootStore.homeStore
    }
  })
@observer  class RecordScreen extends React.Component {
    // static navigationOptions = {
    //     titile:'提币记录',
    //     headerBackTitle: '返回',
        
    // };
    static navigationOptions = ({ navigation }) => ({
        headerTitle: '提币记录'
    });
    constructor(props){
		super(props);
        this.state = {
            isCharge: true
        }
	}
    componentWillUnmount() {
        DeviceEventEmitter.emit('Home');
	};
    componentDidMount(){
        this.props.homeStore.chargeCoinRecord();
    }
    /**
     * 登录
     */
    _loginPress = (navigate) => { 
        navigate('Login');  //跳转到注册过的Register界面
    }
    /**
     * 获取tab的active样式
     * flag 是否是充币
     */
    _getTabStyle = (flag) =>{
        let styleRes = [styles.tabItemTxt];
        if(flag && this.state.isCharge){
            styleRes.push(styles.tabItemActive);
        }else if(!flag && !this.state.isCharge){
            styleRes.push(styles.tabItemActive);
        }
        return styleRes;
    }
    /**
     * tab 改变
     */
    _tabChange = (flag) => {
        this.setState({isCharge: flag});
        if(flag){
            this.props.homeStore.chargeCoinRecord();
        }else{
            this.props.homeStore.getCoinRecord();
        }
    }
    /**
     * 下拉加载更多
     */
    _onEndReached = () =>{
        let currentPage = 1,lastPage = 1,func;
        if(this.state.isCharge){
            currentPage = this.props.homeStore.recordPage;
            lastPage = this.props.homeStore.recordLastPage;
            func = this.props.homeStore.chargeCoinRecord;
        }else { 
            currentPage = this.props.homeStore.getPage;
            lastPage = this.props.homeStore.getLastPage;
            func = this.props.homeStore.getCoinRecord;
        }
        if(currentPage >= lastPage){
            return;
        }else {
            func({page : parseInt(currentPage) + 1});
        }
    }
    render() {
        const chargeStatus = [
            '等待处理',
            '转入成功',
            '已经审核',
            '已经撤销'
        ]
        const getStatus = [
            '等待处理',
            '转出成功',
            '已经审核',
            '已经撤销'
        ]
        const type = [
            '',
            '站内',
            '站外'
        ]
        const status = this.state.isCharge ? chargeStatus : getStatus;
        const data = this.state.isCharge ? this.props.homeStore.recordList : this.props.homeStore.getList;
        return (
            <View style={styles.container}>
                <View style={styles.tabList}>
                    <View style={styles.tabItem}>
                        <TouchableOpacity onPress={()=>this._tabChange(true)}>
                            <Text style={this._getTabStyle(true)}>充币</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.tabItem}>
                        <TouchableOpacity onPress={()=>this._tabChange(false)}>
                            <Text style={this._getTabStyle(false)}>提币</Text>
                        </TouchableOpacity>
                    </View> 
                </View>
                <View style={styles.resultList}>
                    {
                        data.length === 0 ?
                        <View style={{
                            display:'flex',
                            justifyContent:'flex-start',
                            alignContent:'center',
                            alignItems:'center',
                            height: '100%'
                        }}>
                            <Image source={require('../assets/images/kong.png')} style={{width:400 ,height: 400}}></Image>
                        </View>
                        :
                        <FlatList
                            data={data}
                            keyExtractor={(item, index) => index.toString()}
                            onEndReached={this._onEndReached}
                            renderItem={({item}) => (
                                <View style={styles.resultItem} key={item.id}>
                                    <View style={[styles.resAddr,styles.flexRow]}>
                                        <View style={styles.flexRow}>
                                            <Text style={styles.c1}>地址</Text>
                                            <Text style={[styles.c3, styles.f1]}>{item.address}</Text>
                                        </View>
                                        <Icon.Feather name='copy' style={styles.copyIcon}></Icon.Feather>
                                    </View>
                                    <View style={[styles.resCount,styles.flexRow]}>
                                        <View style={styles.flexRow}>
                                            <Text style={styles.c1}>数量</Text>
                                            <Text style={styles.c2}>{this.state.isCharge ? '+' : '-'}{item.num} {item.coinname}</Text>
                                        </View>
                                        <Text style={styles.c2}>{type[item.type]}</Text>
                                    </View>
                                    <View style={[styles.resCount,styles.flexRow]}>
                                        <View style={styles.flexRow}>
                                            <Text style={styles.c1}>状态</Text>
                                            <Text style={styles.c2}>{status[item.status]}</Text>
                                        </View>
                                        <Text style={styles.time}>{item.addtime}</Text>
                                    </View>
                                </View>
                            )}
                        />
                    }
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    tabList:{
        width: '100%',
        height: 51,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    tabItem:{
        width: '50%',
        borderColor: '#BBBBBB',
        borderWidth: 1,
        textAlign:'center',
        lineHeight:51,
        height: 51
    },
    tabItemTxt:{
        lineHeight: 51,
        textAlign:'center',
        color:'#101010'
    },
    tabItemActive:{
        color:'#FF7F4B'
    },
    resultItem:{
        borderBottomColor: '#BBBBBB',
        borderBottomWidth: 1,
        paddingTop: 20,
        paddingLeft: 10,
        paddingRight: 10,
    },
    c1:{
        color:'#B9B6B6',
        fontSize: 14,
        marginRight: 10,
    },
    c2:{
        color:'#FF7F4B'
    },
    f1:{
        fontSize: 9,
        color:'#101010'
    },
    flexRow:{
        display:'flex',
        justifyContent:'space-between',
        flexDirection:'row'
    },
    resCount:{
        marginTop: 5,
        marginBottom: 5,
    },
    time:{
        color:"#999999",
        fontSize:12
    },
    copyIcon:{
        color:'#FF7F4B',
        fontSize:14
    }
});
export default RecordScreen;